<template>
  <div class="body_bgi full bgs_full">
    <big-screen-header :headerName="'牧户：' + `${muhuName}`" />

    <div class="content_box w_full h_full-100 flex_row_around p_10 border_box">
      <!-- 1 -->
      <div class="w_32_5_p h_full flex_column_between">
        <div class="w_full h_49_p chart_box_bgi_1 p_10">
          <data-chart 
            title="存栏统计"
            path=''
            chartType="环状图"
            :chartData="chartData1" 
            filterText=""
            :filterList="[]"
            :isShowUnit="true"
            :isShowFilterIcon="false"
            :isShowFullIcon="true"
          />
        </div>

        <div class="w_full h_49_p chart_box_bgi_1 p_10">
          <data-chart 
            title="配种数量"
            path=''
            chartType="环状图"
            :chartData="chartData2" 
            filterText=""
            :filterList="[]"
            :isShowUnit="true"
            :isShowFilterIcon="false"
            :isShowFullIcon="true"
          />
        </div>
      </div> 

      <!-- 2 -->
      <div class="w_32_5_p h_full flex_column_between ">
        <div class="w_full h_49_p chart_box_bgi_1 bgs_full p_10 border_box">
          <div class="w_full h_40_p relative">
            <div class="w_25_p h_full absolute_center">
              <!-- 牧户头像 -->
              <img 
                class="h_full border_radius_10 cursor response_img" 
                v-if="muhuInfo.avatar"
                :src='filePath + muhuInfo.avatar' alt=""
              >

              <!-- 默认头像 -->
              <img 
                class="h_full object_fit_cover border_radius_10 cursor" 
                v-else
                :src='def_user_img' alt=""
              >
            </div>
          </div>

          <div class="w_full h_50_p color_fff pt_5">
            <div class="flex_row_between pr_20">
              <div class="h_24 lh_24 mb_3">姓名：<span class="main_color">{{ muhuName || '牧户姓名' }}</span> </div>
              <!-- <div class="h_24 lh_24 mb_3">性别：<span class="main_color">{{ formatGender(muhuInfo.gender) }}</span> </div>  -->
            </div>

            <div class="pr_20">
              <div class="h_24 lh_24 mb_3">苏木(镇)： <span class="main_color">{{ townName  }}</span> </div>
              <div class="h_24 lh_24 mb_3">嘎查(村)： <span class="main_color">{{ villageName }}</span> </div>
            </div>

            <div class="flex_row_between pr_20">
              <div class="h_24 lh_24 mb_3">
                电话：<span class="main_color fw_bold font_number ls_2">{{ formatPhone(muhuPhone) }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 位置 -->
        <div class="w_full h_49_p bgs_full chart_box_bgi">
          <bai-du-map :pointList="userPoint" />
        </div>
      </div> 

      <!-- 3 -->
      <div class="w_32_5_p h_full list_box chart_box_bgi_1 bgs_full">
        <div class="full p_10 flex_column_between relative">
          <div class="main_color fw_bold fs_16 ls_2 flex_row_start flex_center">
            <div class="w_1 h_15 main_bgc main_border mr_10"></div>种羊信息  {{ breedingList.length || '' }}
          </div>

          <div class="w_full h_full-30 flex_column_between" v-if="breedingList.length">
            <!-- 种公羊 列表 -->
            <div class="full scroll_box overflow_auto">
              <div
                class="w_full p_10 border_box flex_row_between mb_10 bgc_1a396b78 border_radius_10 p_5" 
                v-for="(item, index) in breedingList" :key="index"
                @click="clickAnimal(item)"
              >
                <!-- 头像 -->
                <!-- <div class="w_20_p aspect_ratio_7_8 border_radius_10 p_10" >
                  <img 
                    class="w_full border_radius_5 cursor response_img" 
                    v-if="item.fileList && item.fileList.length"
                    :src="filePath + item.fileList[0].fileUrl" alt=""
                  >
                  <img 
                    class="w_full border_radius_5 cursor response_img1 fit_cover" 
                    v-else
                    :src="def_sheep_img" alt=""
                  >
                </div> -->

                <!-- 文字信息 -->
                <div class="w_full flex_column_start pl_10 cursor">
                  <div class="text_1 color_green">RFID: {{ item.rfid }}</div>
                  <!-- <div class="text_1 color_fff">种羊场: </div> -->
                  <div class="text_1 color_fff">等级: {{ formatLevel(item.leaveType) }}</div>
                  <div class="text_1 color_fff">入栏年份: {{ item.startDate.substring(0, 4) }} 年</div>
                  <!-- <div class="text_1 color_fff">毛长度: {{ item.maoLength }} cm</div>
                  <div class="text_1 color_fff">类型与皱褶: {{ item.wrinkling }}</div>
                  <div class="text_1 color_fff">性别: {{ formatAnimalGender(item.sex) }}</div>
                  <div class="text_1 color_fff">身高: {{ item.height }} cm</div>
                  <div class="text_1 color_fff">体长: {{ item.tiLength }} cm</div>
                  <div class="text_1 color_fff">体重: <span class="">{{ item.weight }} KG</span></div> -->
                </div>
              </div>
            </div>
          </div>

          <div class="w_80_p h_40 lh_40 bgc_eee main_color border_radius_10 absolute_center fs_24 text_center" v-show="!noSheepList">暂无种羊信息</div>
        </div>
      </div> 
    </div>
  </div>
</template>

<script>
  import defMixin from '@/mixins/def.js'
  import componentsMixin from '@/mixins/components.js'
  import imgMixin from '@/mixins/def-img.js'

  import { getMuhuCattlePage } from '@/api/muhu/index.js' 

  export default {
    name: 'MuHuPage',
    mixins: [defMixin, componentsMixin, imgMixin],
    data() {
      return {
        townId: null,
        townName: null,
        villageId: null,
        villageName: null,
        muhuId: null,
        muhuName: null,
        muhuPhone: null,

        muhuInfo: {},
        breedingList: [],

        chartData1: {},
        chartData2: {},

        muHuDetailData: {},
        sheepList: [],

        userPoint: [],

        isShowLoading: false,
        noSheepList: true
      }
    },
    async mounted() {
      let townId = this.$route.params.townId || ''
      let townName = this.$route.params.townName|| ''
      let villageId = this.$route.params.villageId || ''
      let villageName = this.$route.params.villageName || ''
      let muhuId = this.$route.params.muhuId
      let muhuName = this.$route.params.muhuName
      let muhuPhone = this.$route.params.muhuPhone

      this.townId = townId
      this.townName = townName
      this.villageId = villageId
      this.villageName = villageName
      this.muhuId = parseInt(muhuId)
      this.muhuName = muhuName
      this.muhuPhone = muhuPhone

      // 获取 牧户养殖列表
      this.getMuhuCattlePage({ phone: muhuPhone, current: 1, size: 100 })

      this.initChart()
    },
    methods: {
      initChart() {
        this.chartData1 = {
          unit: '只',
          data: [
            { name: '种公羊', value: 34 },
            { name: '种母羊', value: 134 },
            { name: '羔羊', value: 35 },
          ]
        }

        this.chartData2 = {
          unit: '只',
          data: [
            { name: '种公羊', value: 24 },
            { name: '种母羊', value: 54 },
          ]
        }
      },

      // 获取 牧户养殖档案
      async getMuhuCattlePage(params) {
        let res = await getMuhuCattlePage(params)
        try {
          if (res.code == 200) {
            this.isShowLoading = true

            setTimeout(() => {
              this.breedingList = res.data
              this.isShowLoading = false
              this.noSheepList = res.data.length ? true : false
            }, 1000)
          }
        } catch(err) {
          console.log('获取 牧户养殖档案 失败 : ', err)
        }
      },
      
      clickAnimal(item) {
        this.$router.push(`/sheepDetail/${item.id}/${item.rfid}/${this.muhuInfo.nickName}`)
      },

      handlePageChange(val) {
        this.paginationParams.page = val
        this.filterRecordsYiCount()
      },

      handleSizeChange(val) {
        this.paginationParams.size = val
        this.filterRecordsYiCount()
      },



      

      
    }
  }
</script>

<style>
.el-pagination__total { color: #fff; }

.BMap_cpyCtrl, .anchorBL > a { display: none !important; }

.el-tabs__item { color: #fff !important; }
.el-tabs__item.is-active { color: #409EFF !important; }

.el-tabs__content { height: calc(100% - 50px); }
</style>

